<template>
  <KView class="recommend-goods-item">
    <KView class="goods-item-pic" @click="itemClick">
      <sys-image :src="goods.pic" mode="auto" :radius="8"></sys-image>
    </KView>
    <KView class="goods-item-content">
      <KView class="ellipsis goods-item-name">{{goods.name}}</KView>
      <KView class="goods-item-price clearfix">
        <KView style="float:left">
          <span class="price-unit">¥</span>
          <span class="price-num">{{goods.price}}</span>
        </KView>
        <KView class="goods-item-buy" @click="buyGoods">
          <img class="sys-img" :src="buyImg" mode="aspectFit">
        </KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';
  import SysImage from 'common/sysImage';

  export default {
    props: {
      goods: {
        type: Object,
        required: true
      }
    },

    data() {
      return {
        buyImg: GlobalData.images.plus
      };
    },

    methods: {
      itemClick() {
        this.$emit('item-click', this.goods);
      },

      buyGoods() {
        this.$emit('buy-goods', this.goods);
      }
    },

    components: {
      SysImage
    }
  };

</script>

<style lang="scss">
  .recommend-goods-item {
    width: formatPx(242);
    height: 100%;
    white-space: normal;

    .goods-item-pic {
      height: formatPx(242);
    }

    .goods-item-content {
      margin-top: formatPx(10);

      .goods-item-name {
        font-size: formatPx(30);
        margin-bottom: formatPx(10);
        color: #2f3135;
      }

      .goods-item-price {
        height: formatPx(38);
        color: #FF641F;

        .price-unit {
          font-size: formatPx(32);
          line-height: formatPx(38);
          margin-right: formatPx(5);
        }

        .price-num {
          font-size: formatPx(40);
          font-weight: bold;
          line-height: formatPx(38);
        }

        .goods-item-buy {
          float: right;
          width: formatPx(38);
          height: formatPx(38);
        }
      }
    }
  }

</style>
